<template>
  <view class="container">
    <view class="card">
      <view class="ctitle">反馈</view>

      <view class="desc">
        <view class="title">问题描述</view>
        <view class="content">
          <uni-easyinput
            type="textarea"
            autoHeight
            primaryColor="#ffa500"
            v-model="params.content"
            placeholder="请输入内容"
          ></uni-easyinput>
        </view>
      </view>
      <view class="img">
        <view class="title">图片</view>
        <view class="content">
          <uni-file-picker limit="9" @select="uploadSelect"></uni-file-picker>
        </view>
      </view>
      <view class="people">
        <view class="title">联系人</view>
        <view class="content">
          <uni-easyinput
            primaryColor="#ffa500"
            v-model="params.people"
            placeholder="请输入联系人"
          ></uni-easyinput>
        </view>
      </view>
      <view class="concat">
        <view class="title">联系方式</view>
        <view class="content">
          <uni-easyinput
            primaryColor="#ffa500"
            v-model="params.contact"
            placeholder="请输入联系方式"
          ></uni-easyinput>
        </view>
      </view>
      <view class="btn">
        <view class="submit" @tap="submit">提交</view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { addFeedbackAPI } from "@/services";
import { getUserStorage } from "@/utils/storage";
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";

let params = ref<any>({
  content: "",
  people: "",
  contact: "",
  image: [],
});
onLoad(() => {
  const userProfile = getUserStorage().profile;
  params.value = {
    content: "",
    people: "",
    contact: "",
    image: [],
    userId: userProfile.user_id,
  };
});
const submit = async () => {
  if (
    params.value.content.length > 0 &&
    params.value.people.length > 0 &&
    params.value.contact.length > 0
  ) {
    let result: any = await addFeedbackAPI(params.value);
    console.log(result);
    if (result.code == 200) {
      uni.showToast({
        title: "提交成功",
        icon: "success",
      });
      setTimeout(() => {
        uni.navigateBack({
          delta: 1,
        });
      }, 1000);
    } else {
      uni.showToast({
        title: "提交失败",
        icon: "error",
      });
    }
  } else {
    uni.showToast({
      title: "请填写内容",
      icon: "error",
    });
  }
};
const uploadSelect = (res: any) => {
  const filePath = res.tempFiles[0].file;
  // 调用 uni.uploadFile 方法上传文件
  uni.uploadFile({
    url: "https://nodes.kimhiz.asia/api/upload",
    filePath: filePath.tempFilePath,
    name: "file", // 这是后端用来解析文件流的字段名
    header: { type: "feedback" },
    success: (res: any) => {
      // 请求成功，处理服务器响应
      const data = JSON.parse(res.data);
      if (data.code == 200) {
        // 如果服务器返回成功，更新预览图片的URL
        let img = data.data[0].replace(/\\/g, "/");
        console.log(img);
        params.value.image.push(img);
      } else {
        // 服务器返回错误信息
        console.error("上传失败:", data.message);
      }
    },
    fail: (err) => {
      // 请求失败，打印错误信息
      console.error("请求失败:", err);
    },
  });
};
</script>

<style lang="scss" scoped>
.container {
  padding: 15rpx;
  .card {
    background-color: #fff;
    padding: 10rpx;
    color: #333;
    border-radius: 15rpx;
    .ctitle {
      font-size: 30rpx;
      font-weight: bold;
      padding: 10rpx 0;
      border-bottom: solid 1rpx #eee;
    }
    .desc,
    .img,
    .people,
    .concat {
      width: 100%;
      box-sizing: border-box;
      display: flex;
      padding: 15rpx;
      .title {
        width: 20%;
      }
      .content {
        flex: 1;
      }
    }

    .desc {
      .title::after {
        content: "*";
        color: red;
      }
    }
    .people {
      .title::after {
        content: "*";
        color: red;
      }
    }
    .concat {
      .title::after {
        content: "*";
        color: red;
      }
    }
    .btn {
      display: flex;
      width: 100%;
      height: 100rpx;
      justify-content: center;
      align-items: center;

      .submit {
        width: 40%;
        height: 70%;
        background-color: #ffa500;
        border-radius: 25rpx;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
</style>
